<template>
    <div class="continer">
        <!-- 添加空间页面 -->
        <el-form
            :model="companyData"
            label-width="140px"
            :rules="formRules"
            ref="formRef"
            autocomplete="off"
            class="addCompanyForm"
        >
            <table>
                <tr>
                    <td>
                        <el-form-item label="公司名称 : " prop="name">
                            <el-input v-model="companyData.name" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="营业执照代码 : " prop="code">
                            <el-input v-model="companyData.code" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="企业类型 : " prop="type">
                            <el-select v-model="companyData.type" placeholder="请选择">
                                <el-option
                                  v-for="item in gsTypes"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="注册资本(万元) : " prop="registered_assets">
                            <el-input v-model="companyData.registered_assets" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="所属行业 : " prop="industry">
                            <el-cascader v-model="hyValue" :options="hyOptions" :show-all-levels="false" @change="hyHandleChange"></el-cascader>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="注册时间 : " prop="register_time">
                            <!-- <el-input v-model="companyData.register_time" style="width: 350px;"></el-input> -->
                            <el-date-picker
                              v-model="companyData.register_time"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="注册地址 : " prop="addr">
                            <el-input v-model="companyData.addr" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="办公行政区域 : " prop="area">
                            <el-input v-model="companyData.area" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="园区 : " prop="zone">
                            <el-input v-model="companyData.zone" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="联系人 : " prop="linkman">
                            <el-input v-model="companyData.linkman" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="联系电话 : " prop="tel">
                            <el-input v-model="companyData.tel" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="传真 : " prop="fax">
                            <el-input v-model="companyData.fax" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="电子邮箱 : " prop="email">
                            <el-input v-model="companyData.email" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="用户账号 : " prop="user_account">
                            <el-input v-model="companyData.user_account" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="入驻的工位房间id : " prop="room_id">
                            <el-input v-model="companyData.room_id" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="入驻时间 : " prop="enter_time">
                            <el-input v-model="companyData.enter_time" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="到期时间 : " prop="end_time">
                            <el-input v-model="companyData.end_time" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="入驻的备注 : " prop="note">
                            <el-input v-model="companyData.note" style="width: 350px;"></el-input>
                        </el-form-item>
                    </td>
                </tr>
            </table>
            <el-form-item class="button">
                <el-button class="btn yes" type="primary" @click="queren">确认</el-button>
                <el-button class="btn" @click="quxiao">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { BASE_URL } from "../../../config/app";
    import { addCompany } from "../../../api/spaceManagement/index.js";
    import industryData from "../../../api/json/industry.json";

    export default {
        name: "addCompany",
        data() {
            return {
                companyData: {
                    name: "",
                    code: "",
                    type: "",
                    registered_assets: "",
                    industry: "",
                    register_time: "",
                    addr: "",
                    area: "",
                    zone: "",
                    linkman: "",
                    tel: "",
                    fax: "",
                    email: "",
                    user_account: "",
                    room_id: "",
                    enter_time: "",
                    end_time: "",
                    note: ""
                },
                formRules: {
                    name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
                    code: [{ required: true, message: "请上传营业执照代码", trigger: "blur" }],
                    type: [{ required: true, message: "请输入企业类型", trigger: "blur" }],
                    registered_assets: [{ required: true, message: "请输入注册资本", trigger: "blur" }],
                    industry: [{ required: true, message: "请上传所属行业", trigger: "blur" }],
                    register_time: [{ required: true, message: "请输入注册时间", trigger: "blur" }],
                    addr: [{ required: true, message: "请输入注册地址", trigger: "blur" }],
                    area: [{ required: true, message: "请输入办公行政区域", trigger: "blur" }],
                    linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
                    tel: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
                    user_account: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
                    room_id: [{ required: true, message: "请输入入驻的工位房间id", trigger: "blur" }],
                    enter_time: [{ required: true, message: "请输入入驻时间", trigger: "blur" }],
                    end_time: [{ required: true, message: "请输入到期时间", trigger: "blur" }]
                },
                // 上传图片
                BASE_URL: "",
                upimgLoding: false,
                // 行业选择器
                hyOptions: [],
                hyValue: [],
                // 企业类型
                gsTypes:[
                	{value:"1",label:"合资"},
                	{value:"2",label:"独资"},
                	{value:"3",label:"国有"},
                	{value:"4",label:"私营"},
                	{value:"5",label:"全民所有制"},
                	{value:"6",label:"集体所有制"},
                	{value:"7",label:"股份制"},
                	{value:"8",label:"有限责任"},
                	{value:"9",label:"事业单位"}
                ],
            };
        },
        methods: {
            // 获取所属行业
            getIndustryData(){
                this.hyOptions = industryData;
            },
            hyHandleChange(value){
                this.companyData.industry = String(value[value.length-1]);
                console.log(this.companyData.industry)
            },
            // 提交表单
            queren(){
                this.$refs['formRef'].validate((valid) => {
                    if (!valid) {return false;}
                    addCompany(this.companyData).then((response) => {
                        if(response.code == 0){
                            this.$message.success("添加成功");
                            window.history.back(-1); // 返回上一页
                        }else{
                            this.$message.error(response.message);
                        }
                    }).catch((error) => {
                        this.$message.error("添加失败");
                        console.log(error);
                    })
                })
            },
            quxiao(){
                window.history.back(-1); // 返回上一页
            }
        },
        created() {
            this.BASE_URL = BASE_URL;
            this.getIndustryData();
        }
    };
</script>

<style>
.addCompanyForm, .button{
    width: 70%;
    margin: 0 auto;
}
.form-img{
    max-width:140px;
    max-height:140px;
}
.btn{
    float: right;
}
.yes{
    margin-left: 30px;
}
</style>
